﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:infModels="clr-namespace:StockTraderRI.Infrastructure.Models;assembly=StockTraderRI.Infrastructure"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     
    x:Class="StockTraderRI.Modules.News.Article.ArticleView"
    Height="Auto" Width="Auto" mc:Ignorable="d">
    <UserControl.Resources>
        <!-- By convention every view inside the ResearchControl (ResearchRegion) has to declare 
             a DataTemplate with the "HeaderIcon" key which defines the icon on the Header -->
        <DataTemplate x:Key="HeaderIcon">
            <Grid Margin="15,5,0,0" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="14.5" Height="16.375">
                <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FFFFFFFF" StrokeThickness="2" Data="M409.875,447.625 L409.875,433.25 418.625,433.25 422.375,437 422.375,447.625 z"/>
                <Path Margin="2.75,0,2.625,4.25" VerticalAlignment="Bottom" Height="2" Fill="{x:Null}" Stretch="Fill" Stroke="#FFFFFFFF" StrokeThickness="2" Data="M328.625,443.375 L335.75,443.375"/>
                <Path Margin="2.75,6.375,2.625,8" Fill="{x:Null}" Stretch="Fill" Stroke="#FFFFFFFF" StrokeThickness="2" Data="M328.625,443.375 L335.75,443.375"/>
            </Grid>
        </DataTemplate>
        <!-- templates -->
        <Style x:Key="ArticleItemStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="RowSelectionBorder" BorderBrush="Green" CornerRadius="4" BorderThickness="0">
                            <ContentPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <DataTemplate x:Key="ArticleDataTemplate">
            <StackPanel Margin="0,0,0,10" Cursor="Hand" >
                <TextBlock Text="{Binding Path=PublishedDate}" Foreground="#FF808080" FontFamily="Trebuchet MS" FontSize="12" TextWrapping="Wrap"/>
                <TextBlock Text="{Binding Path=Title}" Foreground="#FF808080" FontFamily="Trebuchet MS" FontSize="14" TextWrapping="Wrap" />
            </StackPanel>
        </DataTemplate>
        <!-- buttons -->
        <ControlTemplate x:Key="BackButtonTemplate" TargetType="{x:Type Button}">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Background="#00000000" Width="22" Height="22">
                <Rectangle x:Name="rectangle" Height="3" Margin="0,2,0,2" Width="22" Fill="#FFA6A6A6" StrokeThickness="0" RadiusX="2" RadiusY="2"/>
                <Rectangle x:Name="rectangle1" Height="3" Width="22" Fill="#FFA6A6A6" StrokeThickness="0" RadiusX="2" RadiusY="2" Margin="0,2,0,2"/>
                <Rectangle x:Name="rectangle2" Height="3" Width="22" Fill="#FFA6A6A6" StrokeThickness="0" RadiusX="2" RadiusY="2" Margin="0,2,0,2"/>
            </StackPanel>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="rectangle" Property="Fill" Value="#FFFFFFFF" />
                    <Setter TargetName="rectangle1" Property="Fill" Value="#FFFFFFFF" />
                    <Setter TargetName="rectangle2" Property="Fill" Value="#FFFFFFFF" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter TargetName="rectangle" Property="Fill" Value="#FFA6A6A6" />
                    <Setter TargetName="rectangle1" Property="Fill" Value="#FFA6A6A6" />
                    <Setter TargetName="rectangle2" Property="Fill" Value="#FFA6A6A6" />
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="rectangle" Property="Fill" Value="#FF000000" />
                    <Setter TargetName="rectangle1" Property="Fill" Value="#FF000000" />
                    <Setter TargetName="rectangle2" Property="Fill" Value="#FF000000" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <ControlTemplate x:Key="OpenButtonTemplate" TargetType="{x:Type Button}">
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="#00000000" Width="22" Height="22">
                <Path x:Name="path" Data="M0,1 L11,1 L11,3 L2,3 L2,18 L17,18 L17,9 L19,9 L19,20 L0,20 z" Fill="#FFA6A6A6" Stretch="Fill" StrokeThickness="0" Margin="2,3,3,2"/>
                <Path x:Name="path2" Height="14" Width="14" Data="M8,12 L20,0" Stretch="Fill" Stroke="#FFA6A6A6" StrokeThickness="2" Margin="0,-6,-6,0"/>
                <Path x:Name="path1" Height="7" Width="7" Data="M0,0 L7,0 L7,7 z" Fill="#FFA6A6A6" Stretch="Fill" StrokeThickness="2" Margin="0,-13,-13,0"/>
            </Grid>

            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="path" Property="Fill" Value="#FFFFFFFF" />
                    <Setter TargetName="path1" Property="Fill" Value="#FFFFFFFF" />
                    <Setter TargetName="path2" Property="Stroke" Value="#FFFFFFFF" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter TargetName="path" Property="Fill" Value="#FFA6A6A6" />
                    <Setter TargetName="path1" Property="Fill" Value="#FFA6A6A6" />
                    <Setter TargetName="path2" Property="Stroke" Value="#FFA6A6A6" />
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="path" Property="Fill" Value="#FF000000" />
                    <Setter TargetName="path1" Property="Fill" Value="#FF000000" />
                    <Setter TargetName="path2" Property="Stroke" Value="#FF000000" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <!-- transitions -->
        <Storyboard x:Key="List">
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ListGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="00:00:00.3000000">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="00:00:00.6000000">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ListGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                <SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:00.6000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="DetailsGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="00:00:00.3000000">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="DetailsGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                <SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:00.3000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Details">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ListGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" KeySpline="0.5,0,0.5,1"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ListGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="00:00:00.3000000">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="DetailsGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="00:00:00.3000000">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="00:00:00.6000000">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="DetailsGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="1" KeySpline="0.5,0,0.5,1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>    
    <Border Padding="10,10,10,10">
        <StackPanel>
            <Grid x:Name="ListGrid" Height="Auto" Width="Auto"  RenderTransformOrigin="0.5,0.5">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Grid.RenderTransform>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Text="NEWS ARTICLES" Style="{StaticResource TextBlockSectionTitle}" AutomationProperties.AutomationId="NewsArticleText" TextWrapping="Wrap" />
                    <ListBox BorderThickness="0"  Grid.Row="1" ItemsSource="{Binding Path=Articles}"
    					ItemTemplate="{StaticResource ArticleDataTemplate}"
    					ItemContainerStyle="{StaticResource ArticleItemStyle}"
                        x:Name="NewsList" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"
    					SelectedItem="{Binding Path=SelectedArticle, Mode=TwoWay}" Margin="0,0,0,0" Background="{x:Null}" BorderBrush="{x:Null}" SelectionChanged="ListBox_SelectionChanged" />
            </Grid>
            <Grid x:Name="DetailsGrid" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5" Width="225">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Grid.RenderTransform>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Text="{Binding Path=SelectedArticle.Title}" Style="{StaticResource TextBlockSectionTitle}" TextWrapping="Wrap" MinWidth="150" Width="190" HorizontalAlignment="Left"/>
                <TextBlock Grid.Row="1" Text="{Binding Path=SelectedArticle.Body}" Foreground="#FF808080" FontFamily="Trebuchet MS" FontSize="12" TextWrapping="Wrap"/>
            	<Canvas HorizontalAlignment="Right" VerticalAlignment="Top" Width="50" Height="24" Grid.Column="0" Grid.Row="0">
                    <Button x:Name="BackButton" Command="{Binding ShowArticleListCommand}" Template="{StaticResource BackButtonTemplate}" Cursor="Hand" Content="{StaticResource BackButtonTemplate}" Margin="-27,0,0,0" />
            		<Button x:Name="OpenButton" Command="{Binding ShowNewsReaderCommand}" Template="{StaticResource OpenButtonTemplate}" Cursor="Hand" Content="{StaticResource OpenButtonTemplate}" Margin="0,0,0,0" d:LayoutOverrides="GridBox" />
            	</Canvas>
            </Grid>
        </StackPanel>
    </Border>

</UserControl>
